<template>
	<!-- <view  class="mask">
		<view style="width: 80%;margin: 0 auto;height: 328px;border-radius: 21px;">
			<view style="width: 286px;height: 243px;margin: 12px auto;">
				<image style="width: 100%;height: 100%;" src="../../static/image/196a3c80b7ae2853233d4f813f4af32.png" mode=""></image>
			</view>
			<view style="display: flex;">
				<button @click="returnBtn" style="width: 32%;border-radius: 21px;
					height: 33px;line-height: 33px;
					background: linear-gradient(150deg, rgb(25, 190, 107) 0%, #447A05  100%);;
					font-size: 15px;border: 1px solid linear-gradient(150deg, rgb(25, 190, 107) 0%, #447A05  100%);;color: #fff;">知道了</button>
				<button @click="authenticationBtn" style="width: 29%;border-radius: 30px;
					border-radius: 21px;height: 33px;
					line-height: 33px;font-size: 13px;border: 1px solid #999;color: #606266;">申请认证</button>
			</view>
		</view>
		
		
		<view class="content">
			<view class="" @click.stop="doScanCode">点击扫码</view>
			<view class="" @click.stop="doDialog">点击弹出</view>
		</view>
	</view> -->
	<view class="centert">
		<view class="header_text">
			生活服务
		</view>

		<view class="justify-around flex">
			<view @click="classification=true"><text
					style="padding-right: 5px;font-size: 13px;font-weight: 500;color: #333333;line-height: 18px;">全部分类</text>
				<u-icon name="arrow-down" color="#888888" size="8"></u-icon>
			</view>
			<view><text
					style="padding-right: 5px;font-size: 13px;font-weight: 500;color: #333333;line-height: 18px;" @click="jl">距离不限</text>
				<u-icon name="arrow-down" color="#888888" size="8"></u-icon>
			</view>
			<u-popup v-model="classification" mode="bottom">
				<view style="display:flex">
					<scroll-view class="tabs" scroll-y="true" style="background: #F5F5F5; height:700rpx">
						<view @click="tabsCut(index)" class="tabs_name flexCenter"
							:class="item1==index? 'tabs_name_active':''" v-for="(item,index) in list">
							<view v-if="item1==index" class="active1"></view>{{item.p_name}}
						</view>
					</scroll-view>
					<scroll-view class="tabs_check" scroll-y="true" style="height:700rpx;">
						<view class="tabs_item" :class="item.check?'active2':''"
							v-for="(item,index) in list[item1].childrenList" @click="tabsCutItem(index)"
							>
							{{item.p_name}}
						</view>
					</scroll-view>
				</view>
				<view class="flex">
					<view style="width:50%;height: 48px;;font-size: 15px;" class="flexCenter" @click="reset()">重置</view>
					<view
						style="color: #FFFFFF;background: linear-gradient(180deg, #76D904 0%, #417505 100%);width:50%;height: 48px;;font-size: 15px;"
						class="flexCenter" @click="selectionsort">已选({{selectnum}})</view>
				</view>
				
			</u-popup>
		</view>
		<!-- 测试 -->
		<!-- <u-upload :action="action" :file-list="fileList" @beforeRead="afterRead"></u-upload> -->
		<!-- 卡片 -->
		<scroll-view scroll-y="true" style="height: 80vh;" @scrolltolower="tolower">
			<view class="list_box" v-for="(item,index) in serviceList">
				<view @click="JumpDetails" class="shadow"
					style="padding:15px;display: flex;background: #FFFFFF;border-radius: 8px;align-items: center;margin-top: 10px;"
					>
					<image style="display:block ;width:90px;height:90px;" src="../../static/image/weChat-pyq.png">
					</image>
					<view style="width:220px; margin-left:11px;">
						<view style="font-size: 16px;line-height: 22px;">{{item.service_name}}</view>
						<text
							style="background: #EDFFEB;border-radius: 2px;border: 1px solid #C9E8C6;padding: 1px 6px;font-size: 10px;color: #427705;margin-top:10px;display: inline-block;">同城跑腿配送</text>
						<view style="color: #666666;font-size: 10px;margin-top: 8px;">距您1.2km</view>
						<view style="margin-top:10px;line-height: 20px;" class="flex flexClsNowrapSpcBtw">
							<view style="color: #666666;"><text style="font-size: 10px;color:#F55959">¥</text><text
									style="font-size: 15px;color:#F55959;font-weight: bold">20.00</text>/次</view>
							<view style="color: #666666;font-size: 10px;">已服务{{"(待添加)"}}人</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" style="height: 80px;margin-bottom: 100px !important;"/>
		</scroll-view>
		<view class="position-fixed order_form" @click="skipOrder">
			<view style="margin-top:13px;display: flex;justify-content: center;">
				<image style="display: inline-block;width:20px; height:24px" src="../../static/image/dingdan.png">
				</image>
			</view>
			<view style=" font-size: 10px;color: #FFFFFF; margin-top:3px;display: flex;justify-content: center;">订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		log
	} from '../../js_sdk/hhyang-uni-simple-router/helpers/warn'
	export default {
		data() {
			return {
				classification: false,
				//选择全部分类的记录
				item1: 0,
				//全部分类渲染循环
				list: [{childrenList:[]}],
				// 列表渲染循环
				serviceList:[],
				// 搜索表
				searchForm:{
					checkBox: [],
					x:'1',
					y:'2',
					pageIndex:0
				},
				// 已选个数
				selectnum:0,
				user_id:'',
				//加载状态
				status: "loading"
			}
		},
		onLoad() {
			// console.log(this.$requestYz)
			// this.lifeServices()
			// 获取服务分类
			this.serviceForLifeList()
			// this.jl()
			this.searchClassification()
		},
		onShow() {
			this.user_id = uni.getStorageSync('rawData').userId;
			// this.checkLogin();//需要在测试完毕后解除注释
		},
		onPullDownRefresh() {
			this.searchClassification()
		},
		methods: {
			// //
			// afterRead(){
				
			// },
			// 验证是否登录或实名认证
			checkLogin(){
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
									_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							this.getTableList();
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh();
			},
			//暂时没用到
			async lifeServices() {
				await this.$requestYz.api.classificationOfLifeServices({}).then(res => {
					// this.list = res.data.data.datalist
					console.log('res数据',res);
					// this.list.forEach((item, index) => {
					// 	item.childList.forEach((i, n) => {
					// 		this.$set(i, "check", false);
					// 	})
					// })
				})
				console.log(this.list)
			},
			//获取服务分类
			async serviceForLifeList() {
				await this.$requestYz.api.serviceForLifeList().then(res => {
					this.list=res.data.data.datalist
					this.list.forEach((item, index) => {
						item.childrenList.forEach((i, n) => {
							this.$set(i, "check", false);
						})
					})
				})
			},
			//分类搜索
			async searchClassification() {
				this.status = "loading"
				await this.$requestYz.api.searchClassification(this.searchForm).then(res => {
					this.serviceList= [...this.serviceList, ...res.data.data.datalist]
					console.log("this.serviceList",res.data.data.datalist);
					if ((this.searchForm.pageIndex + 1) * 10 < res.data.data.total) {
						this.isBottom = false
						this.status = "loadmore"
					} else {
						this.status = "nomore"
					}
				})
			},
			//触底刷新
			tolower(){
				console.log("触底刷新触发了");
				if(this.status=="loadmore"){
					this.searchForm.pageIndex+=1
					this.searchClassification()
				}
			},
			//卡片
			JumpDetails() {
				uni.navigateTo({
					url: './lifeServiceDetails'
				});
			},
			returnBtn() {
				console.log('111')
				uni.switchTab({ //跳转页面
					url: "/pages/index/newIndex"
				})
			},
			authenticationBtn() {
				uni.navigateTo({ //跳转页面
					url: "../information/informationindex"
				})
			},
			tabsCut(ind) {
				this.item1 = ind
			},
			tabsCutItem(ind) {
				this.list[this.item1].childrenList[ind].check = !this.list[this.item1].childrenList[ind].check
				this.searchForm.checkBox = []
				this.list.forEach((item, index) => {
					item.childrenList
						.forEach((i, n) => {
							if (i.check) {
								this.searchForm.checkBox.push(i.id)	
							}
						})
				})
				this.selectnum=this.searchForm.checkBox.length
				console.log(this.searchForm.checkBox,this.searchForm.checkBox.length);
				this.searchForm.checkBox=this.searchForm.checkBox.join(',')
				// console.log(this.searchForm.checkBox,this.searchForm.checkBox.length);
			},
			reset() {
				this.list.forEach((item, index) => {
					item.childrenList.forEach((i, n) => {
						this.$set(i, "check", false);
					})
				})
			},
			//我的订单
			skipOrder() {
				uni.navigateTo({
					url: './myOrder'
				});
			},
			// doDialog() {
			// 	uni.showModal({
			// 		title:'uniapp弹框'
			// 	})
			// },
			// doScanCode() {
			// uni.scanCode({
			// 	success: function(res) {
			// 		console.log('条码类型：' + res.scanType);
			// 		console.log('条码内容：' + res.result);
			// 		uni.navigateTo({
			// 			url:'../scancode/scancode'
			// 		})
			// 	}
			// });
			// }

			//搜索分类
			selectionsort() {
				this.searchClassification()
			},
			jl(){
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						    console.log('nihao');
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							this.searchForm.x=res.longitude
							this.searchForm.y=res.latitude
					},
					fail:function(res){
						uni.showToast({
						    title: '获取地址失败，请检查手机是否打开定位功能，未打开将导致部分功能不可用',
						    icon:'none'
						});
					}
				})
			}
			//获取生活服务页面的服务
			// async getselectionsort() {
			// 	await this.$requestYz.api.getselectionsort({

			// 	}).then(res => {

			// 	})
			// },
		}
	
	}
</script>

<style>
	page {
		background: #F4F4F4;
		height: 100%
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		/* background-color: rgba(0, 0, 0, 0.4); */
		background: url(../../static/image/2421a63377db7b2a7fe878be95e7669.png);
		background-size: 100% 66%;
		width: 100%;
		height: 100%;

	}

	/* .centert{
		 background:#F4F4F4 ;
	} */
	.header_text {
		background: url(../../static/image/Rectangle.png);
		height: 118px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.tabs {
		width: 105px;
	}

	.tabs_name {
		width: 105px;
		height: 50px;
		background: #F5F5F5;
		font-size: 13px;
	}

	.tabs_name_active {
		font-size: 15px;
		font-weight: 500;
		color: #427705;
		background: #FFFFFF;
	}

	.tabs_check {
		padding: 6px;

	}

	.tabs_item {
		float: left;
		margin: 6px;
		height: 30px;
		padding: 6px 14px;
		background: #F5F5F5;
		border-radius: 4px;
	}

	.active1 {
		width: 4px;
		height: 21px;
		margin-right: 10px;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 2px;
	}

	.active2 {

		background: #E5F6D3;
		color: #427705;
		border-radius: 4px;
	}

	.list_box {
		padding: 10px 15px;

		border-radius: 8px;
	}

	.order_form {
		width: 60px;
		height: 60px;
		background: url(../../static/image/round.png);
		bottom: 100px;
		right: 15px
	}
</style>